<template>
  <div class="errorCircle">
    <section>
      <div class="box"></div>
    </section>
  </div>
</template>
<style scoped lang="scss">
section {
  position: relative;
  width: 200px;
  height: 200px;
}
// section::before {
//   content: "";
//   position: absolute;
//   height: 10px;
//   width: 10px;
//   border-radius: 100%;
//   border-top: 1px solid orange;
//   top: 50%;
//   left: 50%;
//   margin-top: -5px;
//   margin-left: -5px;
//   animation: turn 1s infinite linear;
//   filter: drop-shadow(0 0 2px $orangeColor) drop-shadow(0 0 5px $orangeColor)
//     drop-shadow(0 0 10px $orangeColor) drop-shadow(0 0 20px $orangeColor);
// }
.box,
.box::after,
.box::before {
  border: 2px solid var(--lineColor);
  border-left: 2px solid $orangeColor;
  border-right: 2px solid $orangeColor;
  border-radius: 50%;
}
.box::after,
.box::before {
  position: absolute;
  content: "";
  left: 50%;
  top: 50%;
}
.box {
  width: 100px;
  height: 100px;
  position: relative;
  animation: turn 1s linear infinite;
  transform-origin: 50% 50%;
}
.box::before {
  width: 90px;
  height: 90px;
  margin-top: -45px;
  margin-left: -45px;
  animation: turn2 2s linear infinite;
}
.box::after {
  width: 80px;
  height: 80px;
  margin-top: -40px;
  margin-left: -40px;
  animation: turn 3s linear infinite;
}

@keyframes turn {
  100% {
    transform: rotateZ(-1turn);
  }
}
@keyframes turn2 {
  100% {
    transform: rotateZ(1turn);
  }
}
@keyframes rotate {
  100% {
    border: none;
    border-top: 2px solid $orangeColor;
    border-bottom: 2px solid $orangeColor;
    transform: translate(-50%, -50%) rotate3d(0.5, 0.5, 0.5, -720deg);
  }
}
</style>
